

<div style="background:#f2f2f2;">
    <ol class="tree">
        <li>
            <label for="folder1" class="folderOne foldertop">Missing Imputation</label> <input type="checkbox" id="folder1" />
            <ol>
                <li>
                <li><a ui-sref="en-incomplete-MA"><label class="folderTwo">Data based</label></a></li>
                <li><a ui-sref="en-incomplete-AR"><label class="folderTwo">Model based</label></a></li>
                </li>
            </ol>
        </li>

        <li>
            <label for="folder2" class="folderOne" >Anomaly Detection and Repairing</label> <input type="checkbox" id="folder2" />
            <ol>
                <li>
                <li><a ui-sref="en-inaccurate-SD"><label class="folderTwo">Statistics based</label></a></li>        <!-- SD -->
                <li><a ui-sref="en-inaccurate-OZ"><label class="folderTwo">Model based</label></a></li>             <!-- OZ -->
                <li><a ui-sref="en-fan-data-problem"><label class="folderTwo">Data based</label></a></li>           <!-- 相关性分析 -->
                </li>
            </ol>
        </li>

        <li>
            <label for="folder3"  class="folderOne">Matching Inconsistent Attribute</label> <input type="checkbox" id="folder3" />
            <ol>
                <li>
                <li><a ui-sref="en-inconsistent-CR-graph"><label class="folderTwo">Maximum Weight Matching</label></a></li>
                <li><a ui-sref="en-inconsistent-CR-greed"><label class="folderTwo">Greedy Strategy</label></a></li>
                <li><a ui-sref="en-fan-data-problem"><label class="folderTwo">Optimization Computing</label> </a></li>
                </li>
            </ol>
        </li>

        <li><a ui-sref="en-statistics"><label class="folderOne">Result Visualization</label></a></li>

        <li><a ui-sref="en-statistics"><label class="folderOne">Cleaning Logs</label></a></li>


    </ol>
</div>

<div style="background:#DFDCDC;">
</div>


<script>
    $('#calendar').datepicker({
    });

    !function ($) {
        $(document).on("click","ul.nav li.parent > a > span.icon", function(){
            $(this).find('em:first').toggleClass("glyphicon-minus");
        });
        $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
    }(window.jQuery);

    $(window).on('resize', function () {
        if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
    })
    $(window).on('resize', function () {
        if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
    })
</script>
<style>
    table.basetable td{
        text-align:center;
        font-size:12px;
        color:#FFFFFF;
        padding-bottom:3px;
        padding-top:3px
    }
    tr.basehead td{
        text-align: center;
        font-size: 14px;
        color: #FFFFFF
    }
    /*
    tbody tr:nth-child(odd) {
        background-color: #1E2A4C
    }
    tbody tr:nth-child(even) {
        background-color: #142540
    }
    */
    a.basea hover{
        color:#FFFFFF;
        text-decoration:none;
    }

    .head-menu a:link{
        color:#FFF;
        text-decoration:none;
    }
    .head-menu a:active{
        color:#FFF;
        text-decoration:none;
    }
    .head-menu a:hover{
        color:#FFF;
        text-decoration:none;
    }

    .head-menu a:visited{
        color:#FFF;
        text-decoration:none;
    }
</style>
<style type="text/css">
    .tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}
    /*隐藏input*/
    .tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}
    /*所有菜单项设置统一样式*/
    .tree li {position: relative;list-style: none;}
    /*一级菜单加下边线*/
    .tree>li{border-bottom: 1px solid #d9d9d9;}
    /*给有子菜单的菜单项添加背景图标*/
    .tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;background-position:100% 50%;white-space:nowrap;overflow:hidden;text-overflow: ellipsis; }
    .tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}
    /*清除所有展开的子菜单的display*/
    .tree li input + ol{display: none;}
    /*当input被选中时，给所有展开的子菜单设置样式*/
    .tree input:checked + ol {padding-left:14px;height: auto;display: block;}
    .tree input:checked + ol > li { height: auto;}
    /*末层菜单为A标签，设置样式*/
    .tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#000;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}
    .tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;}
    /*不同层级的菜单字体大小不同*/
    .tree .foldertop{font-size: 14px;color:#000;margin-top:40px;}
    .tree .folderOne{font-size: 14px;color:#000}
    .tree .folderTwo{font-size:12px;color:#000}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        //每个有子菜单的菜单项添加点击事件
        $(".tree label").click(function(){
            //获取当前菜单旁边input的check状态
            var isChecked = $(this).next("input[type='checkbox']").is(':checked');
            //展开和收齐的不同状态下更换右侧小图标
        });

    });
</script>